<template>
 <div style="max-width: 1940px;margin: 0 auto;min-height: 100vh;padding: 40px 40px;padding-top: 85.8px;">

   <div style="position: fixed;width: calc(100vw - 70px);right: 0;top: 0;border-bottom: 1px solid rgba(128,128,128,0.2);height: 60.8px;padding-top: 12px;text-align: center;backdrop-filter: blur(10px);z-index: 10000"
    :style="{
     backgroundColor:appData.theme.translucentBackground
    }"
   >
     <div style="position: relative;display: inline-block;width: 90%;max-width: 475px">
       <input @keypress="async (e)=>{
         if(e.code=='Enter'){
           get()
         }
       }" v-model="data.input" placeholder="搜索咨询师" style="border-radius: 5px;background-color: var(--color-neutral-1);padding: 0 10px;height: 36px;outline: none;color: var(--color-neutral-10);position: relative;width: 100%;color: var(--color-neutral-10);padding-right: 65px"
              :style="{
            background:appData.theme.background
          }"
       /><svg @click="get" style="position: absolute;right: 8px;top: 8px;color: var(--color-neutral-10);cursor: pointer;" width="20" height="20" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M22 5c9.389 0 17 7.611 17 17 0 3.549-1.087 6.844-2.947 9.57l6.782 6.782a1 1 0 010 1.414l-1.697 1.698a1 1 0 01-1.414 0l-6.604-6.605A16.934 16.934 0 0122 39c-9.389 0-17-7.611-17-17S12.611 5 22 5zm0 4.2C14.93 9.2 9.2 14.93 9.2 22S14.93 34.8 22 34.8 34.8 29.07 34.8 22 29.07 9.2 22 9.2z" fill="currentColor"/></svg>
       <svg v-if="data.input!=''" @click="data.input=''" style="position: absolute;right: 36px;top: 8px;color: var(--color-neutral-10);cursor: pointer;" width="20" height="20" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
     </div>

   </div>

   <div style="width: calc(100% + 20px);position: relative;transition-property: opacity,transform;transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1)"
      :style="{
        opacity:(data.status==-1 || data.status==2)?1:0,
        transform:data.status==1?'translateY(40px)':'translateY(0px)',
        transitionDuration:data.status==1?'0s':'.3s',
      }"
   >

     <p style="font-size: 22px;color: var(--color-neutral-10);margin-bottom: 20px;margin-top: 20px">咨询师列表</p>
     <p v-if="data.items.length==0" style="color: var(--color-neutral-6);font-size: 14px;margin-bottom: 10px">搜索结果为空</p>

     <div v-for="item in data.items" style="display: inline-block;margin-bottom: 20px"
      :style="{
        width:'calc(100% /' + getCardWidth().toString() + ')'
      }"
     >
       <div class="userCard" style="border-radius: 10px;box-shadow: 0 1px 3px rgba(0,0,0,0.2);display: inline-block;width: calc(100% - 20px);position: relative;border: 1px solid rgba(128,128,128,0.2);padding: 15px 15px"
            :style="{
              backgroundColor:appData.theme.background,
            }"
       >
         <v-avatar style="float: left" color="rgb(0,120,215)" size="44">
           <span v-if="item.avatar==''">{{ tool.getShortName(item.name) }}</span>
           <div v-if="item.avatar!=''"  style="width: 48px;height: 48px;display: inline-block;background-position: center;background-repeat: no-repeat;background-size: cover;"
                :style="{
                  backgroundImage:'url(' + appData.serverURL + '/download/' + item.avatar + ')'
                }"
           >

           </div>
         </v-avatar>
         <div style="height: 40px;width: calc(100% - 75px);display: inline-block;margin-left: 8px">
           <p style="font-size: 16px;font-weight: bold;color: var(--color-neutral-10)">{{ item.name }}</p>
           <p style="font-size: 14px;color: var(--color-neutral-6)">{{ item.email }}</p>
         </div>
         <br>
         <div style="margin-top: 15px">
           <button style="width: calc(100%);border: 0 !important;margin-right: 10px" @click="()=>{
            if(homeData.loginedUserInfo.isVIP==0){
              return
            }
             $emit('showChatForm',{
               userInfo:item
             })
           }">{{ homeData.loginedUserInfo.isVIP==0?'VIP用户可以发消息':'发消息' }}</button>
           <!-- <button style="width: calc(50% - 5px);border: 0 !important" @click="()=>{
             controlForward(true,8,item.mark)
           }">转发</button> -->
         </div>
       </div>
     </div>


   </div>

 </div>
</template>

<script>
import router from "@/router";
import tool, {waitSeconds} from '@/utlis/tool';
import config from '@/config';

export default{
  computed:{
    tool(){
      return tool
    }
  },
  data(){
    return{
      data:{
        items:[],
        input:'',
        colNum:5,
        status:0
      }
    }
  },
  mounted(){
    if(this.homeData.loginedUserInfo==undefined){
      router.push('/')
      return
    }
    this.get()
  },
  methods:{
    async refreshItems(op = ()=>{}){
      this.data.status = 0
      await tool.waitSeconds(0.3)
      this.data.status = 1
      await op()
      await tool.waitSeconds(0.001)
      this.data.status = 2
      await tool.waitSeconds(0.3)
      this.data.status = -1
    },
    getCardWidth(){
      if(this.appData.pageSize.width<950){
        return 1
      }
      if(this.appData.pageSize.width<1350){
        return 2
      }
      if(this.appData.pageSize.width<1650){
        return 3
      }
      if(this.appData.pageSize.width<1800){
        return 4
      }
      return 5
    },
    async get(){
      this.controlLoading(1)

      this.refreshItems(async ()=>{
        this.data.items = (await tool.axiosPostWithCheckStatus(config.serverURL,'/consult/list',{
          token:this.homeData.token,
          type:1,
          input:this.data.input
        })).results
      })
      this.controlLoading(0)
    }
  },
  props:{
    appData: undefined,
    homeData: undefined,
    controlLoading: undefined,
    ctrlCharm:undefined,
    ctrlForm:undefined,
    rsps:undefined,
    controlForward:undefined
  },
}
</script>

<style scoped>

.userCard:hover{
  box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
  transform: translateY(-2px);
}

.userCard{
  transition-property: box-shadow,height,padding,transform;
  transition-duration: .3s;
  transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
}

input:focus{
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

</style>